import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";

//  点击进度条改变播放时间
export default function () {
    // 获取进度条外面盒子元素
    const progress = ref(null);
    //   获取进度条的宽度
    let progressWidth = "";
    onMounted(() => {
        //   获取进度条的宽度  setup 会在beforeCreate 之前执行一次,此时还不能获取元素,所以在这里进行赋值
        progressWidth = progress.value.offsetWidth;
    });
    //  获取vuex
    const store = useStore();

    //  获取vuex中的progressbar模块的width属性。用于控制进度条
    const setProgress = computed(() => {
        return store.getters["ProgressBar/percentageWidth"];
    });
    //   点击进度条获取时间百分比
    function clickProgress(e) {
        const temporary = (e.offsetX / progressWidth).toFixed(4);
        //  让播放时间重定位
        store.commit("ProgressBar/changePlayTime", temporary);
        //  让歌词重新定位
        store.commit("SongLyric/changeLyricProgressTime", 0)
    }

    return {
        progress,
        setProgress,
        clickProgress
    }

}